﻿<link href="../../Content/general.css" rel="stylesheet" type="text/css" />
<section style="overflow: hidden">
	<div class="right fl">
		<div class="main_separate"></div>
		<div class="sub_left_col fl">
			<div class="l_product fl">
				<div class="p_img">
					<img data-bind="attr: { atl: Name, src: ImageBig }">
					<img data-bind="visible: Arrive" class="pp_new" alt="Sản phẩm mới có hàng" src="../../Content/images/new.png" />
					<img  data-bind="visible: IsUsed" class="pp_secondhand_2" alt="Sản phẩm đã qua sử dụng" src="../../Content/images/secondhand.png">
					<img  data-bind="visible: CommingSoon" class="pp_comingSoon" alt="Sắp có hàng" src="../../Content/images/comingSoon.png">
				</div>
				<div class="p_price" style="margin-bottom: 0;font-size:20px;"><span data-bind="text: ActualCost"></span> VND</div>
				<div data-bind="click: $root.buyProduct">
					<center>
						<a id="btnDetailBuy" title="Mua Hàng" href="">
							<img src="../../Content/images/buy_btn.png">
						</a>
					</center>
				</div>
			</div>
			<div class="r_product fl">
				@if (Request.IsAuthenticated)
				{
					<input id="shiny" type="button" value="Edit" style="float: right" data-bind="click:editproduct"/>
				}
				<h1 class="p_title"><span data-bind="text: Name"></span></h1>
				<div class="p_s_detail">
					<table style="border-collapse: collapse;border: 0;padding:0;line-height: 18px;">
						<tbody>
							<tr>
								<td>
									<span class="" data-bind="if:IsUsed">Mới 99%:</span>
									<span class="" data-bind="ifnot:IsUsed">Mới fullbox:</span>
								</td>
								<td style="padding-left: 10px;">
									<span class="g_price_official " style="color:red;font-weight: 600;"><span data-bind="text: ActualCost"></span> VND</span>
								</td>
							</tr>
						</tbody>
					</table>
				
					<div class="row" style="padding-top: 3px;">
						<div class="l_txt">Tình trạng:</div>
						<div class="r_txt">
							<div>Đang có hàng tại:</div>
							<div>
								<p class="d_map_store cboxElement" title="288 Lê Đại Hành - P.15 - Q.10 - Tp.HCM " style="color:#000;">Cửa hàng duy nhất: 288 Lê Đại Hành - P.15 - Q.10 - Tp.HCM </p>
							</div>
						</div>
					</div>
				
					<div class="clr"></div>
				
					<div class="row">
						<div class="l_txt">Bảo hành:</div>
						<div class="r_txt">
							<div>BH phần cứng 1 đổi 1 trong <span data-bind="text:Warranty"></span> tháng</div>
						</div>
						<div class="clr"></div>
					</div>
				
					<div class="row">
						<div class="l_txt">Màu sắc:</div>
						<div class="r_txt">
							<div><span data-bind="text:Color"></span></div>
						</div>
						<div class="clr"></div>
					</div>
					<div class="hr"></div>
					<div data-bind="visible: IsPromotion" class="promote">KHUYẾN MÃI</div>
					<div class="promoteContent">
						<div data-bind="html: Promotion"></div>
					</div>
				</div>
				
			</div>

			<div class="clr"></div>
			<br>
			<div class="p_parameters">
				<div id="tab_container">
					<br>
					<ul class="menu">
						<li id="parameter" class="active">Tổng quan</li>
						<a href="#p_d_customer_ideas">
							<li class="long_tab">ý kiến khách hàng</li>
						</a>

					</ul>
					<br>
					<span class="clear"></span>
					<div data-bind="html: Detail"></div>
					<br>
					<ul class="menu">
						<a href="#parameter">
							<li>Tổng quan</li>
						</a>

						<li id="p_d_customer_ideas" class="long_tab_active">ý kiến khách hàng</li>

					</ul>
					<br>
				</div>
			</div>
			<form id="frmComment" method="post" novalidate="novalidate">
				<br> Lưu ý: Những ô (<span style="color: red;">*</span>) là bắt buộc.
				<div>
					<div class="regis_line">
						<div class="fl regis_line_txt cs_ideas_form_txt">Tiêu đề<span style="color: red;">*</span> </div>
						<div class="fl "><input type="text" id="input_fb_title" name="title" data-bind="value:feedbackTitle"></div>
						<div class="clr"></div>
					</div>
					<div class="regis_line">
						<div class="fl regis_line_txt cs_ideas_form_txt">Họ và tên<span style="color: red;">*</span> </div>
						<div class="fl "><input type="text" id="input_fb_name" name="name" data-bind="value:feedbackName"></div>
						<div class="clr"></div>
					</div>
					<div class="regis_line">
						<div class="fl regis_line_txt cs_ideas_form_txt">Email<span style="color: red;">*</span> </div>
						<div class="fl "><input type="text" id="input_fb_email" name="commentEmail" data-bind="value:feedbackEmail"></div>
						<div class="clr"></div>
					</div>
					<div class="regis_line">
						<div class="fl regis_line_txt cs_ideas_form_txt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
						<div class="fl">Vui lòng nhập chính xác email để nhận được phản hồi nhanh nhất</div>
						<div class="clr"></div>
					</div>
					<div class="regis_line">
						<div>Nhận xét của bạn:<span style="color: red;">*</span> (gõ tiếng việt có dấu, không quá 1000 chữ)</div>
						<div><textarea name="content" id="input_fb_content" rows="4" cols="69" data-bind="value:feedbackContent"></textarea></div>
					</div>
				</div>
					
				<div style="text-align: right;">
					<input type="button" value="GỬI" class="btn_send_idea" data-bind="click:submitFeedback">
				</div>
				<div>
                        
				</div>
			</form>
                    


                    
                    


			<div id="commentArea"  data-bind="foreach:feedbackList"   class="list_comment"  >
				<style>
					.comment_respond
					{
					}
					.comment_respond .esc
					{
						float: right;
						color: red;
					}
					.comment_respond p label
					{
						float: left;
						width: 60px;
						padding: 5px 0;
					}
					.comment_respond p label.error
					{
						position: absolute;
						width: 60px;
						padding: 5px 0;
					}
					.comment_respond .reply_cmt_left
					{
						float: left;
					}
					.comment_respond .reply_cmt_right
					{
						float: left;
						margin-left: 20px;
						width: 280px;
					}
					.comment_respond .comment_form_text
					{
						width: 273px;
						height: 57px;
					}
					.comment_respond .reply_btn
					{
						padding: 0;
						margin: 0;
					}
					.comment_respond .btn_send_idea
					{
						float: right;
					}
					.reply_btn span
					{
						float: left;
					}
					.clearfix
					{
						clear: both;
					}
					.bg_reply
					{
						background: #EDEDED;
						padding: 3px 0;
					}
				</style>

				<div  class="item_comment">
					<div class="comment_item_ct">
						<div class="cs_idea_line">
							<div class="fl ddv_ava"><img src="../../Content/images/ddv_ava.png"></div>
							<div class="fl">
								<div style="width:510px;" class="fl">
									<b style="width:350px;" class="fl" data-bind="text: feedbackTitle"></b> <span class="font_grey fr" data-bind="text: feedbackDate"></span>
								</div>
								<div class="clr"></div>
								<div class="cmt_box" data-bind="text: feedbackContent">
								</div>

							</div>
							<div class="clr"></div>
						</div>
					</div>
				</div>
			</div>



			<div class="fr navigation">
			</div>

			<br>


		</div>
	</div>
	</section>
<script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.validation.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.fancybox.js" type="text/javascript"></script>
<script src="../../Scripts/message.js" type="text/javascript"></script>
<script src="../../Scripts/Models/Product.js" type="text/javascript"></script>
<script src="../../Scripts/Models/Feedback.js" type="text/javascript"></script>
<link href="../../Content/themes/message_default.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/numeral.min.js" type="text/javascript"></script>
<script type="text/javascript">



	function UserListViewModel() {
		// Data
		var self = this;
		self.ProductId = ko.observable();
		self.Name = ko.observable();
		self.Color = ko.observable();
		self.Brand = ko.observable();
		self.Quantity = ko.observable();
		self.Price = ko.observable();
		self.ActualCost = ko.observable(900);
		self.Warranty = ko.observable();
		self.IsUsed = ko.observable();
		self.IsPromotion = ko.observable();	
		self.Promotion = ko.observable();
		self.IsUsed = ko.observable();
		self.CommingSoon = ko.observable();
		self.Arrive = ko.observable();
		self.ImageBig = ko.observable();
		self.Detail = ko.observable();
		

		// Load initial state from server, convert it to Task instances, then populate self.tasks
		$.getJSON("/api/products/GetProduct/@ViewBag.id", function (allData) {
			self.ProductId(allData.Product.ProductId);
			self.Name(allData.Product.Name);
			self.Color(allData.Product.Color);
			self.Brand(allData.Product.Brand);
			self.Quantity(allData.Product.Quantity);
			self.Price(allData.Product.Price);
			self.ActualCost(numeral(allData.Product.ActualCost).format('0,0'));
			self.Warranty(allData.Product.Warranty);
			self.IsUsed(allData.Product.IsUsed);
			self.CommingSoon(allData.Product.CommingSoon);
			self.Arrive(allData.Product.Arrive);
			self.IsPromotion(allData.Product.Promotion);
			var image = '../../Content/phones/img-products-' + allData.Product.Image + '-175x0.jpg';
			self.ImageBig(image);
			if (allData.Promotion != null)
				self.Promotion(allData.Promotion.Content);
			if (allData.Detail != null)
				self.Detail(allData.Detail.Content);
		});

		self.editproduct = function() {
			window.location = "/home/EditProduct/@ViewBag.id";
            };


self.feedbackTitle = ko.observable().extend({required:true});
self.feedbackName = ko.observable().extend({required:true});
self.feedbackEmail = ko.observable().extend({required:true , email:true});
self.feedbackContent = ko.observable().extend({required:true});
self.feedbackList = ko.observableArray();



var validationOptions = 
      { insertMessages: true, decorateElement: true, errorElementClass: 'errorFill' };
    ko.validation.init(validationOptions);
    self.errors = ko.validation.group(self);


	    self.refreshFeedbackData = function() {
	        $.getJSON('/api/Feedback/GetAllFeedbackOfProduct?mProductId=' + @ViewBag.id, function(allData) {
	            var mappedUsers = $.map(allData, function(item) { return new Feedback(item); });
	            self.feedbackList(mappedUsers);
	        });
	    };
	    self.refreshFeedbackData();

self.submitFeedback = function () {
    var hasErrors = self.errors().length!=0;
//    $.each(self.events(), function (index, item) {
//        unwrappedItem = ko.utils.unwrapObservable(item)
//        if (unwrappedItem.errors().length != 0) {
//            hasErrors = true;
//            unwrappedItem.errors.showAllMessages();
//        }
//    });
 
    if (hasErrors)
    {
        dhtmlx.alert({
						type: "alert-error",
						text: "Dữ liệu nhập sai",
						title: "Thất Bại!",
						ok: "OK"
					});
    }
    else
    {
        var obj = { "FeedBackTitle": self.feedbackTitle,
        "CustomerName": self.feedbackName,
        "CustomerEmail": self.feedbackEmail,
        "ProductID": self.ProductId,
        "FeedBackContent": self.feedbackContent
                  };
        var json = ko.toJSON(obj);

         $.ajax({
				url: '/api/Feedback/PostFeedBack/' ,
				type: 'POST',
				contentType: "application/json; charset=utf-8",
				context: { productname: self.Name() },
                data: json,
				success: function (results, status) {
					if (status == "success") {
                        dhtmlx.alert({
							text: "Bình luận thành công!",
							title: "Thành Công!",
							ok: "OK",
                            callback: function(result) {
                                self.refreshFeedbackData();
                                $("#input_fb_title").val('');
                                $("#input_fb_name").val('');
                                $("#input_fb_email").val('');
                                $("#input_fb_content").val('');
                                self.feedbackTitle("");
                                self.feedbackName("");
                                self.feedbackContent("");
                                self.feedbackEmail("");
                            }
						});
						
					}
				},
				error: function (results, status) {
					dhtmlx.alert({
						type: "alert-error",
						text: "Có lỗi xảy ra, không thể thêm bình luận",
						title: "Thất Bại!",
						ok: "OK"
					});
				}
			});
    }
   
    
 };




		self.buyProduct = function() {
			$.ajax({
				url: '/api/Products/PostShopping/' + self.ProductId(),
				type: 'POST',
				contentType: "application/json; charset=utf-8",
				context: { productname: self.Name() },
				success: function (results, status) {
					if (status == "success") {
//						dhtmlx.alert({
//							text: "Thêm " + this.productname + "\"vào giỏ hàng thành công!",
//							title: "Thành Công!",
//							ok: "OK"
//						});
						window.location = "/home/ViewCart";
					}
				},
				error: function (results, status) {
					dhtmlx.alert({
						type: "alert-error",
						text: "Thêm " + this.productname + "\"vào giỏ hàng thất bại!",
						title: "Thất Bại!",
						ok: "OK"
					});
				}
			});
		};





	}



	ko.applyBindings(new UserListViewModel());
</script>
